<!--
 * @Author: Li Zengkun
 * @Date: 2022-07-25 17:20:57
 * @LastEditors: Li Zengkun
 * @LastEditTime: 2022-08-08 08:34:10
 * @Description: 
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/cart.css">
    <link rel="stylesheet" href="../node_modules/font-awesome/css/font-awesome.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
</head>

<body>
    <header>购物车</header>

    <ul class="goods-list">

        <li class="good">
            <input class="checkbox" type="checkbox">
            <img class="good-img" src="../img/cart/g (1).png" alt="">
            <div class="content">

                <div class="good-name">
                    丛林物语双面印花磨毛四件套
                </div>
                <div class="info">1.8M;米白色</div>
                <div class="price">￥<span>399</span></div>

            </div>
            <div class="check-num">
                <span>-</span>
                <input type="num" name="num" value="1">
                <span>+</span>
            </div>
            <a href="#" class="close"><img src="../img/cart/close.png" alt=""></a>
        </li>
        <li class="good">
            <input class="checkbox" type="checkbox">
            <img class="good-img" src="../img/cart/g (1).png" alt="">
            <div class="content">

                <div class="good-name">
                    丛林物语双面印花磨毛四件套
                </div>
                <div class="info">1.8M;米白色</div>
                <div class="price">￥<span>399</span></div>

            </div>
            <div class="check-num">
                <span>-</span>
                <input type="num" name="num" value="1">
                <span>+</span>
            </div>
            <a href="#" class="close"><img src="../img/cart/close.png" alt=""></a>
        </li>
        <li class="good">
            <input class="checkbox" type="checkbox">
            <img class="good-img" src="../img/cart/g (1).png" alt="">
            <div class="content">

                <div class="good-name">
                    丛林物语双面印花磨毛四件套
                </div>
                <div class="info">1.8M;米白色</div>
                <div class="price">￥<span>399</span></div>

            </div>
            <div class="check-num">
                <span>-</span>
                <input type="num" name="num" value="1">
                <span>+</span>
            </div>
            <a href="#" class="close"><img src="../img/cart/close.png" alt=""></a>
        </li>

    </ul>

    <div class="guess-like">
        <div class="headline">猜你喜欢</div>
        <ul>
            <li>
                <div class="img-box">
                    <img src="../img/cart/g (2).png" alt="">

                </div>
                <div class="title">清新四件套清新四件套清新四件套</div>
                <div class="price">￥<span id="price">399</span></div>
            </li>
            <li>
                <div class="img-box">
                    <img src="../img/cart/g (2).png" alt="">

                </div>
                <div class="title">清新四件套</div>
                <div class="price">￥<span id="price">399</span></div>
            </li>
            <li>
                <div class="img-box">
                    <img src="../img/cart/g (2).png" alt="">

                </div>
                <div class="title">清新四件套</div>
                <div class="price">￥<span id="price">399</span></div>
            </li>
            <li>
                <div class="img-box">
                    <img src="../img/cart/g (2).png" alt="">

                </div>
                <div class="title">清新四件套</div>
                <div class="price">￥<span id="price">399</span></div>
            </li>
            <li>
                <div class="img-box">
                    <img src="../img/cart/g (2).png" alt="">

                </div>
                <div class="title">清新四件套</div>
                <div class="price">￥<span id="price">399</span></div>
            </li>

        </ul>
    </div>

    <!-- 下单 -->
    <div class="place-order">
        <label for="checkAll">
            <input type="checkbox" id="checkAll">
            全选
        </label>
        <div class="price">￥<span id="price">188888888888.00</span></div>
        <a href="#" class="btn">下单</a>
    </div>

    <!-- 底部导航 -->
    <nav class="bottom-nav">
        <a href="#">
            <img src="../img/footer/首页1.png" alt="">
            <span>首页</span>
        </a>
        <a href="selection.html">
            <img src="../img/footer/钻石 (1).png" alt="">
            <span>优选</span>
        </a>
        <a href="#">
            <img src="../img/footer/分类2.png" alt="">
            <span>分类</span>
        </a>
        <a class="active" href="cart.html">
            <img src="../img/footer/购物车1.png" alt="">
            <span>购物车</span>
        </a>
        <a href="personal_center.html">
            <img src="../img/footer/我的2.png" alt="">
            <span>我的</span>
        </a>
    </nav>
</body>

<style>
    body {
        background-color: #f4f4f4;
    }
    
    .goods-list {
        width: 100%;
    }
    
    .goods-list .good {
        background: #fff;
        margin-bottom: 2.8vw;
        position: relative;
        width: 100%;
        /* background: #555555; */
        padding: 3vw;
        box-sizing: border-box;
        display: flex;
        justify-content: left;
        align-items: center;
    }
    
    .good-img {
        width: 21vw;
        height: 21vw;
        border-radius: 1vw;
        margin-left: 4vw;
    }
    
    .content {
        padding: 1.2vw 3.2vw;
    }
    
    .good-name {
        font-size: 3.47vw;
        font-weight: bold;
        line-height: 3.47vw;
        color: #555555;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .info {
        font-size: 3.2vw;
        font-weight: normal;
        line-height: 3.2vw;
        color: #999999;
        margin-top: 2.27vw;
    }
    
    .price {
        margin-top: 7.6vw;
        font-size: 3.47vw;
        font-weight: bold;
        line-height: 2vw;
        letter-spacing: 0vw;
        color: #555555;
    }
    
    .checkbox {
        height: 4vw;
        width: 4vw;
    }
    
    .check-num {
        position: absolute;
        width: calc(10.93vw * 3);
        height: 7.07vw;
        bottom: 3.47vw;
        right: 2.54vw;
        display: flex;
        border: solid 0.27vw #f4f4f4;
        border-radius: 0.67vw;
        box-sizing: border-box;
    }
    
    .check-num>span,
    .check-num>input {
        width: calc(100% / 3);
        height: 100%;
        text-align: center;
        user-select: none;
        cursor: pointer;
        line-height: 7.07vw;
        font-size: 3.47vw;
        color: #999999;
        border: none;
    }
    
    .check-num>input {
        border-left: .27vw solid #f4f4f4;
        border-right: .27vw solid #f4f4f4;
    }
    
    .check-num>span:active {
        background-color: var(--primary-color);
    }
    
    .close {
        position: absolute;
        width: 2.67vw;
        height: 2.67vw;
        top: 2.8vw;
        cursor: pointer;
        right: 2.8vw;
    }
    
    .close img {
        height: 100%;
        width: 100%;
    }
    /* 猜你喜欢 */
    
    .guess-like {
        width: 100%;
        background: #fff;
    }
    
    .guess-like .headline {
        font-size: 3.73vw;
        text-align: center;
        padding: 4.8vw 0;
        font-weight: bold;
        font-stretch: normal;
        letter-spacing: 0.19vw;
        color: #333333;
    }
    
    .guess-like>ul {
        width: 100%;
        box-sizing: border-box;
        padding: 0 2.67vw;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    
    .guess-like>ul>li {
        width: 45.87vw;
        margin-bottom: 2.67vw;
    }
    
    .guess-like>ul>li .img-box {
        width: 100%;
        height: 46.67vw;
        background-color: #999999;
        padding: 0;
    }
    
    .guess-like>ul>li .title {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 3.47vw;
        font-weight: bold;
        font-stretch: normal;
        line-height: 3.47vw;
        letter-spacing: 0vw;
        color: #333333;
        padding: 2.8vw 2vw 0 2vw;
    }
    
    .guess-like>ul>li .price {
        font-size: 3.47vw;
        font-weight: bold;
        line-height: 3.47vw;
        letter-spacing: 0vw;
        color: #c55a5c;
        margin: 0;
        padding: 2.8vw 2vw;
    }
    
    .guess-like>ul>li .img-box img {
        height: 100%;
        width: 100%;
    }
    /* 下单 */
    
    .place-order {
        width: 100vw;
        height: 12.93vw;
        background-color: #fff;
        border-top: solid 0.27vw #eaeaea;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: fixed;
        bottom: 13.07vw;
    }
    
    .place-order>label>input {
        height: 4vw;
        width: 4vw;
        margin-right: 4vw;
    }
    
    .place-order>label {
        width: 20vw;
        margin: 0 4vw;
    }
    
    .place-order .price {
        width: 38vw;
        text-align: right;
        font-size: 3.73vw;
        font-weight: bold;
        line-height: 0;
        margin: 0;
        letter-spacing: 0vw;
        color: #c55a5c;
    }
    
    .place-order .btn {
        line-height: 12.93vw;
        width: 30vw;
        height: 100%;
        text-align: center;
        background: #c55a5c;
        font-size: 3.73vw;
        color: #ffffff;
    }
</style>

</html>